<template>
  <view class="page">
    <view class="page-ctx">
      <view class="tui-top">
        <view class="top-box">
          <view class="status-title">
            {{ info.statusInfo || "" }}
          </view>
          <view class="status-desc">
            {{ status_desc || "" }}
          </view>
        </view>
      </view>

      <view class="tui-money">
        <text>退款金额</text>
        <text>￥{{ info.money || 0 }}</text>
      </view>
      <view class="t-wrap">
        <view class="h3">驳回信息</view>
        <view class="t-box flex-between">
          <view class="">驳回时间</view>
          <view class="">2021-21-21</view>
        </view>
        <view class="t-box">
          <view class="">驳回理由</view>
          <view class="t">
            22222222222222222222222222222222222222222222222222222222222222222222222222222222222222222222
          </view>
        </view>
      </view>
      <view class="goods_list">
        <view class="h3">退款信息</view>
        <view class="item-con" v-if="productInfo.id">
          <view
            @click="toRoute('product/product-detail?id=' + productInfo.id)"
            class="item-con-children">
            <view class="item-con-img">
              <image :src="productInfo.image" mode=""></image>
            </view>
            <view class="item-con-r flex1">
              <text class="title">{{ productInfo.title }}</text>
              <text class="subtitle">{{ productInfo.keyVals || "" }}</text>
              <view class="item-con-r-bot flex-between">
                <text>{{ productInfo.priceSale }}积分</text>
                <text>×{{ productInfo.num }}</text>
              </view>
            </view>
          </view>
        </view>
        <view class="tui-item">
          <text>退款原因</text>
          <text>{{ refund_type_map[info.type] }}</text>
        </view>

        <view class="tui-item">
          <text>申请时间</text>
          <text>{{ info.createdTime }}</text>
        </view>
        <view class="tui-item">
          <text>退货单号</text>
          <text>{{ info.sn }}</text>
        </view>
        <view class="remark">
          <view>描述和凭证</view>
          <view class="con">
            {{ info.remark || "无" }}
          </view>
          <view class="tui-img" v-if="info.images && info.images.length > 0">
            <image
              v-for="(item, index) in info.images"
              :src="item"
              @click="doPreview(index, image, info.images)"></image>
          </view>
        </view>
      </view>

      <view
        class="store-address"
        v-if="type_title == '退货退款' || type_title == '换货'">
        <view class="tui-type">
          <text>退货方式</text>
          <text>自行寄回</text>
        </view>
        <view class="address" v-if="info.shouhuo_json">
          <text>我的地址</text>
          <view class="address-info">
            <view class="title">
              {{ vuex_config.comAddress || "" }}
            </view>
            <view class="user">
              <text>
                {{ vuex_config.comTitle || "" }}
                {{ vuex_config.comPhone || "" }}
              </text>
            </view>
          </view>
        </view>

        <view class="address">
          <text>退货地址</text>
          <view class="address-info-box flex">
            <view class="address-info">
              <view class="title">
                {{ vuex_config.comAddress || "" }}
              </view>
              <view class="user">
                <text>
                  {{ vuex_config.comTitle || "" }}
                  {{ vuex_config.comPhone || "" }}
                </text>
              </view>
            </view>
            <view class="icon-box flex-center">
              <image
                @click="copy_address"
                src="@/static/common/copy.png"></image>
            </view>
          </view>
        </view>
      </view>

      <view class="box-item box-info" v-if="kuaidiJson.company">
        <view class="info-title">邮寄信息</view>
        <view class="order-content">
          <view class="item">
            <text class="label">快递公司</text>
            <text class="value">{{ kuaidiJson.company }}</text>
          </view>
          <view class="item">
            <text class="label">快递单号</text>
            <text class="value">{{ kuaidiJson.orderId }}</text>
          </view>
        </view>
      </view>
    </view>

    <w_bottom_safe height="140" />

    <view
      class="page-foot"
      v-if="info.statusInfo == '待退货' || info.status == 2">
      <view class="safe-fixed-bottom">
        <view class="btns flex-between">
          <view
            v-if="info.status == 2"
            class="btn flex-center btn-bg"
            @click="do_buyer_return_product()">
            邮寄回平台
          </view>
        </view>
      </view>
    </view>

    <!-- <u-popup mode="center" :safeAreaInsetBottom="false" :show="show_return_product_pop"
			@close="show_return_product_pop=false" @open="show_return_product_pop=true">
			<view class="youji-poup">
				<view class="youji-title">
					<text>输入邮寄信息</text>
				</view>
				<view class="youji-item">
					<text>快递公司</text>
					<input v-model="params.kuaidiCompany" placeholder-class="place" placeholder="请输入您邮寄商品的快递公司" />
				</view>
				<view class="youji-item">
					<text>快递单号</text>
					<input v-model="params.kuaidiOrderId" placeholder-class="place" placeholder="请输入您邮寄商品的快递单号" />
				</view>
				<view class="youji-btn">
					<view class="btn-cancel" @click="show_return_product_pop=false">
						取消
					</view>
					<view class="btn" @click="do_submit_return_info()">
						确认
					</view>
				</view>
			</view>
		</u-popup> -->

    <refund_add_express_pop
      ref="refund_add_express_pop"
      @confirm="confirmExpress" />
  </view>
</template>

<script>
import refund_add_express_pop from "@/components/refund/refund_add_express_pop.vue";
export default {
  components: {
    refund_add_express_pop,
  },
  data() {
    return {
      refund_id: "",
      info: {}, //服务单详情
      type: "",
      refund_type_map: {
        1: "仅退款",
        2: "退货退款",
        3: "换货",
      },
      type_title: "",
      //
      // 状态操作
      is_allow_return: false, //是否允许邮寄回商品
      //

      orderId: "",
      is_show: false,
      type: 1, // 1待付款  2带配送 3待提货 4已提货 5退款
      info: {
        pay_info: {},
      },
      productInfo: {},
      kuaidiJson: {},
      status_desc: "", //状态描述
      //

      qrcode: "",
      type_list: [
        {
          text: "微信支付",
          value: 1,
        },
        {
          text: "余额支付",
          value: 2,
        },
      ], //支付方式
      tips: {
        text: "请选择支付方式",
      },
      is_show_pay: false,
      show: false,
      cancel_show: false,
      show_cancelorder: false,
      content: "确定取消该订单吗？",
      fahuo_id: "",

      goodsNum: "",
      imageList: [],
      CurLevel: {}, //会员等级信息
      show_return_product_pop: false,
      params: {
        kuaidiCompany: "",
        kuaidiOrderId: "",
      },
    };
  },
  computed: {},

  onLoad(option) {
    this.refund_id = option.id;
    this.type = option.type;
    this.type_title = this.refund_type_map[this.type];
    this.setView();
  },
  methods: {
    setView() {
      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "refund_detail",
          id: this.refund_id,
        },
      }).then((res) => {
        if (res.code == 200) {
          let data = res.data;
          this.info = data;
          this.productInfo = data.productInfo || {};
          this.kuaidiJson = data.kuaidiJson || {};

          if (data.status >= 3) {
            if (data.fahuo_info) {
              this.express_getInfo(data.fahuo_info.fahuo_id);
            }
          }
        }
      });
    },

    doPreview(current, image, urls) {
      console.log("图片预览 pic", image);
      // console.log('图片预览 urls', urls)
      uni.previewImage({
        current: current,
        urls: urls,
        indicator: "default",
        loop: false,
      });
    },

    open() {
      // console.log('open');
    },
    close() {
      this.is_show = false;
      // console.log('close');
    },
    cancel_btn() {
      this.show_cancelorder = false;
    },
    close_poup() {
      this.is_show = false;
    },
    open_poup() {
      this.is_show = true;
    },
    copy_order(val) {
      uni.setClipboardData({
        data: val,
        success: function () {
          console.log("success");
        },
      });
    },

    copy_address() {
      uni.setClipboardData({
        data: this.vuex_config.comAddress,
        success: function () {
          console.log("success");
        },
      });
    },

    do_submit_return_info() {
      if (!this.params.kuaidiCompany) {
        this.$alert("快递公司不能为空");
        return false;
      }
      if (!this.params.kuaidiOrderId) {
        this.$alert("快递单号不能为空");
        return false;
      }

      this.$api({
        url: "/service.php",
        method: "get",
        data: {
          action: "refund_addKuaidi",
          id: this.refund_id,
          ...this.params,
        },
      }).then((res) => {
        this.$alert(res);
        if (res.code == 200) {
          this.toBack({
            time: 1500,
          });
        }
      });
    },

    //
    do_buyer_return_product() {
      this.$refs.refund_add_express_pop.init(this.info);
    },
    confirmExpress() {
      this.setView();
    },
  },
};
</script>

<style lang="scss">
page {
  background: #f6f6f6;
}
</style>
<style lang="scss" scoped>
.page {
  .page-ctx {
    padding: 24rpx 32rpx;
  }
}

.tui-top {
  background: #cb0011;
  background: transparent;

  .top-box {
    background: #ffffff;
    border-radius: 8rpx 8rpx 8rpx 8rpx;
    padding: 32rpx 24rpx;

    .status-title {
      font-family: PingFang SC, PingFang SC;
      font-weight: bold;
      font-size: 32rpx;
      color: #f49c0d;
    }

    .status-desc {
      margin-top: 10rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 24rpx;
      color: #000000;
    }
  }
}

.tui-money {
  margin: 24rpx 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: bold;
  font-size: 28rpx;
  color: #222222;
  background: #ffffff;
  // box-shadow: 0rpx 4rpx 16rpx 2rpx rgba(0, 0, 0, 0.06);
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  padding: 26rpx 24rpx 22rpx;
}

.store-address {
  margin-bottom: 24rpx;
  background: #ffffff;
  // box-shadow: 0rpx 4rpx 16rpx 2rpx rgba(0, 0, 0, 0.06);
  border-radius: 8rpx 8rpx 8rpx 8rpx;
  padding: 34rpx 24rpx 22rpx;

  .tui-type {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 28rpx;

    text {
      &:nth-child(2) {
        font-size: 24rpx;
        color: #9695a3;
      }
    }
  }

  .address {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 28rpx;
    margin-top: 32rpx;

    .address-info-box {
      flex: 1;
      overflow: hidden;
    }

    .address-info {
      flex: 1;
      text-align: right;

      .title {
        font-size: 24rpx;
        color: #9695a3;
      }

      .user {
        font-size: 28rpx;
        color: #9695a3;
        text-align: right;
      }
    }

    .icon-box {
      align-self: stretch;
      width: 48rpx;

      image {
        width: 32rpx;
        height: 32rpx;
      }
    }
  }
}

.order-info {
  margin: 16rpx 32rpx;
  background: #ffffff;
  border-radius: 8rpx;
  padding: 34rpx 24rpx;
}

.order-detail-box {
  display: flex;
  flex-direction: column;
  background: $color;
  padding: 34rpx 32rpx;

  .address_con {
    display: flex;
    justify-content: space-between;
    flex-direction: column;

    /deep/.u-count-down__text {
      font-size: 26rpx;
      color: #ffffff !important;
    }
  }
}

.h3 {
  display: flex;
  font-size: 28rpx;
  color: #000000;
  padding: 0 0 15rpx;
  font-weight: bold;
}

.address1 {
  display: flex;
  justify-content: space-between;

  .address-right {
    display: flex;
    justify-content: space-between;
  }
}

.address1_l {
  display: flex;
  font-size: 24rpx;
  color: #000000;
}

.address_con_t {
  color: #ffffff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.address_con_l {
  display: flex;
  justify-content: center;
  flex-direction: column;
  background: #ffffff;
  border-radius: 8rpx;
  margin-top: 36rpx;
  padding: 20rpx;
}

.address_con_r {
  display: flex;
  align-items: center;
}

.tihuoma {
  display: flex;
  background: #f51905;
  color: #ffffff;
  font-size: 28rpx;
  width: 120rpx;
  justify-content: center;
  padding: 10rpx 0;
  border-top-left-radius: 30rpx;
  border-bottom-left-radius: 30rpx;
}

.address2 {
  display: flex;
  font-size: 24rpx;
  color: #000000;
  flex-wrap: nowrap;
}

.address3 {
  flex: 1;
  font-size: 24rpx;
  color: #000000;
}

.address-right1 {
  height: 56rpx;
  border: 2rpx solid #777777;
  box-sizing: border-box;
  border-radius: 4rpx;
  margin-right: 24rpx;
  padding: 10rpx 24rpx;
  display: flex;
  font-size: 24rpx;
  justify-content: center;
  align-items: center;
}

.goods_list {
  margin-bottom: 24rpx;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  padding: 34rpx 32rpx 0rpx;
}

.goods_item_r {
  display: flex;
  flex: 1;
  flex-direction: column;
}

.text2 {
  width: 370rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.goods_item_r1 {
  display: flex;
  justify-content: space-between;
  font-size: 24rpx;
  color: #333333;
}

.goods_item_r2 {
  display: flex;
  justify-content: flex-end;
  color: #a3a3a3;
  font-size: 24rpx;
}

.goods_item_r3 {
  display: flex;
  color: #a3a3a3;
  font-size: 24rpx;
}

.cell_group {
  display: flex;
  flex-direction: column;
  padding: 30rpx 20rpx;
  background: #ffffff;
}

.cell {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* border-bottom: 1px solid #EEEEEE; */
}

.cell_price {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.cell-line {
  border: 2rpx solid #f5f5f5;
  margin-top: 28rpx;
}

.cell-yingfu {
  display: flex;
  justify-content: flex-end;
  margin-top: 32rpx;
  align-items: center;
}

.cell-yingfu-money {
  font-size: 36rpx;
  color: #ff0000;

  &::before {
    content: "￥";
    font-size: 28rpx;
  }
}

.cell_l {
  display: flex;
  font-size: 26rpx;
  align-items: center;
  color: #8e8e8e;
  min-height: 56rpx;
}

.cell_l_font1 {
  font-size: 24rpx;
  font-weight: bold;
  color: #222222;
}

.cell_l_font2 {
  font-size: 24rpx;
  color: #222222;
}

.cell_r {
  display: flex;
  align-items: center;
  /* font-size: 26rpx;
		color: #333333; */
}

.cell_btn {
  display: flex;
  font-size: 24rpx;
  color: #7f7f7f;
  border: 1px solid #eeeeee;
  padding: 4rpx 20rpx;
  border-radius: 30rpx;
  margin-left: 10rpx;
}

.pay-type {
  padding: 30rpx 20rpx;
  margin-top: -127rpx;
  margin-left: 30rpx;
  margin-right: 30rpx;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
}

.pay-type-right {
  display: flex;
  align-items: center;
  justify-content: center;

  image {
    margin-right: 24rpx;
  }
}

.bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  padding: 20rpx 30rpx 40rpx;
  width: 100%;
  background: #ffffff;
  z-index: 1;
  bottom: 0;
  height: 166rpx;
  box-shadow: 0px -8px 20px rgba(0, 0, 0, 0.06);
}

.item-con {
  display: flex;
  flex-direction: column;
  padding-bottom: 10rpx;

  /* border-bottom: 1px solid #EEEEEE; */
  .item-con-children {
    display: flex;
    padding-bottom: 20rpx;

    .item-con-img {
      display: flex;

      image {
        width: 176rpx;
        height: 176rpx;
      }
    }

    .item-con-r {
      display: flex;
      width: 460rpx;
      flex-direction: column;
      margin-left: 24rpx;
      justify-content: space-between;

      .title {
        width: 500rpx;
        line-height: 50rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-weight: bold;
        font-size: 28rpx;
        color: #000000;
      }

      .subtitle {
        font-weight: 500;
        font-size: 24rpx;
        color: #000000;
      }

      .item-con-r-bot {
        margin-top: 18upx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        &.text:nth-of-type(1) {
          font-weight: bold;
          font-size: 28rpx;
          color: #e23410;
        }
        text {
          font-weight: bold;
          font-size: 28rpx;
          color: #000000;
        }
      }
    }
  }
}

.tui-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 30rpx;

  text {
    &:nth-child(1) {
      font-weight: bold;
      font-size: 24rpx;
      color: #000000;
    }

    &:nth-child(2) {
      font-size: 24rpx;
      color: #9695a3;
    }
  }
}

.remark {
  margin-top: 30rpx;
  padding-bottom: 40rpx;

  > view {
    font-weight: bold;
    font-size: 24rpx;
    color: #000000;
  }

  .con {
    font-size: 24rpx;
    color: #9695a3;
    margin-top: 22rpx;
  }

  .tui-img {
    margin-top: 28rpx;

    image {
      width: 202rpx;
      height: 202rpx;
      margin-right: 16rpx;
      margin-bottom: 12rpx;

      &:nth-child(3n) {
        margin-right: 0;
      }
    }
  }
}

.info {
  position: relative;
}

.flex {
  display: flex;
}

/deep/.u-text__value {
  font-size: 22rpx !important;
}

.express-reason {
  margin-top: 10rpx;
  font-size: 24rpx;
}

.youji-poup {
  padding: 52rpx 24rpx 64rpx;
  width: 686rpx;

  .youji-title {
    text-align: center;
    font-size: 32rpx;
    font-weight: bold;
  }

  .youji-item {
    display: flex;
    align-items: center;
    margin-top: 38rpx;

    text {
      font-size: 24rpx;
      font-weight: bold;
      color: #000000;
      margin-right: 32rpx;
    }

    input {
      flex: 1;
      height: 100%;
      font-size: 24rpx;
      color: #cfd0df;
    }

    .place {
      font-size: 24rpx;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      color: #cfd0df;
    }
  }

  .youji-btn {
    margin-top: 60rpx;
    display: flex;

    .btn-cancel {
      background: #f5f7f9;
      flex: 1;
      padding: 22rpx 0 20rpx;
      margin-right: 26rpx;
      text-align: center;
      font-size: 28rpx;
    }

    .btn {
      flex: 1;
      background: #000000;
      color: #ffffff;
      font-size: 28rpx;
      padding: 22rpx 0 20rpx;
      text-align: center;
    }
  }
}

.box-item {
  margin-bottom: 24rpx;
  padding: 32rpx 24rpx;
  background: #ffffff;
  // box-shadow: 0rpx 0rpx 16rpx 2rpx rgba(0, 0, 0, 0.08);
  border-radius: 16rpx 16rpx 16rpx 16rpx;
}

.box-info {
  margin-top: 24rpx;

  .info-title {
    font-family: PingFang SC, PingFang SC;
    font-weight: bold;
    font-size: 28rpx;
    color: #222222;
  }

  .order-content {
    margin-top: 20rpx;

    .item {
      display: flex;
      justify-content: space-between;

      & + .item {
        margin-top: 22rpx;
      }

      .label {
        display: inline-block;
        min-width: 5em;
        font-family: PingFang SC, PingFang SC;
        font-weight: bold;
        font-size: 24rpx;
        color: #000000;
      }

      .value {
        font-family: PingFang SC, PingFang SC;
        font-weight: 400;
        font-size: 24rpx;
        color: #9695a3;
      }
    }
  }
}

.page-foot {
  .btns {
    width: 100%;

    .btn {
      flex: 1;
      // width: 345rpx;
      height: 80rpx;
      border-radius: 58rpx 58rpx 58rpx 58rpx;
      border: 2rpx solid #eff1f6;
      font-family: Microsoft YaHei, Microsoft YaHei;
      font-weight: 400;
      font-size: 28rpx;
      color: #666666;

      & + .btn {
        margin-left: 24rpx;
      }

      &.btn-bg {
        background: #cb0011;
        color: #ffffff;
      }

      &[disabled] {
      }
    }
  }
}
.t-wrap {
  padding: 38upx 24upx 28upx;
  background: #ffffff;
  border-radius: 24rpx 24rpx 24rpx 24rpx;
  margin-bottom: 24upx;
  .t-box {
    margin-bottom: 30upx;
    & > view {
      font-weight: 400;
      font-size: 24rpx;
      color: #333333;
    }
    & > view:nth-of-type(1) {
      font-weight: bold;
      font-size: 24rpx;
      color: #000000;
    }
    .t {
      margin-top: 22upx;
      word-break: break-all;
    }
  }
}
</style>
